<template>
		<div style="z-index:1000">
				<div class="popupDiv" style="width: 7.5rem;z-index:1000;position: relative">
					<div class="main" ref='remove'>
						<div class="univSearchWrap">
							<div class="univSearBox">
								<div class="header">
									<span @click="goback">
										<i class="imgIcon backimgs"></i>
									</span>
								</div>
						
							</div>
							<scroller ref='scrollerBottom'>
								<div class="scrollerDiv" v-show="commonList.length > 0">
									<div style="height:0.8rem"></div>
									<!-- <div class="describe">共{{ commonList.length }}个搜索结果</div> -->
									<ul class="scrollerCheckList">
										<li v-for="(item, index) in commonList" :key="index" @click="addOrRemove(item)">
											<img class="imgIcon" src="~/static/images/search_icon_sure.png" icon-class="search_icon_sure" v-if="JSON.stringify(checklist).indexOf(JSON.stringify(item)) !== -1" />
										
											<img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
											<span :class="[JSON.stringify(checklist).indexOf(JSON.stringify(item)) !== -1 ? 'selectColor': '']">
												<b style="display: block;">{{item.catalogName}}</b>
									
												<p>{{item.majorName}}</p>
											</span>
										</li>
									</ul>
									<div style="width: 100%;height: 92px;"></div>
								</div>
								<div style="width: 100%;height: 92px;"></div>
							</scroller>

							<div class="footer" v-show="commonList.length > 0">
								<div class="left">
									<span class="hasChoose">已选择</span>
									<span class="selectedNum">{{ checklist.length }}</span>
						
									<span class="totalNum">/{{3-yixuan}}</span>
								</div>
								<div class="right" @click="submit">添加到意向专业</div>
							</div>
						</div>

					</div>
				</div>

	</div>
</template>

<script>
import { getAcademy, getMajor, getCascadeArealabel } from "~/api/volunteer";
import { getMajorSecond } from "~/api/selectCourse";
	import ls from 'store2';
	export default {
		props: {
	
		},

		components: {

	
		},
		data() {
			return {
				yixuan: 0,
				commonList: [],
				checklist: [],
			};
		},
		watch: {

		},
		created(){
			if(	sessionStorage.getItem('sendList')){
				this.checklist = JSON.parse(sessionStorage.getItem('sendList'))
			}else{
				this.checklist=[]				
			}
		},
		mounted() {
			
			let majors = decodeURIComponent(this.commonJs.GetUrlParam('majorNames'));		
			this.$visit(this.$route.path+'/'+majors)
			this.getMajorSecond(majors)
		},
		methods: {
			getMajorSecond(majors ){
				let obj={
					name:majors
				}
				getMajorSecond(obj).then(res=>{
							if (res.code === '0') {
							if(	sessionStorage.getItem('sendList')){
							this.checklist = JSON.parse(sessionStorage.getItem('sendList'))
							
							}else{
								this.checklist=[]				
							}
						if (res.data.length > 0) {
							let ary = [];
							res.data.forEach(item => {
								ary.push(item.majorName)
							})
							this.commonList = res.data
							
						} else {
							this.commonList = []
							this.$vux.toast.text('无对应专业，请重新搜索');
						}
			
					}	
				}).finally(()=>{

				})
			},
			getMajorData(major) {
				getMajor(major).then(res => {
					if (res.code === '0') {
							if(	sessionStorage.getItem('sendList')){
							this.checklist = JSON.parse(sessionStorage.getItem('sendList'))
							
							}else{
								this.checklist=[]				
							}
						if (res.data.length > 0) {
							let ary = [];
							res.data.forEach(item => {
								ary.push(item.majorName + '&' + item.majorCode)
							})
							this.commonList = res.data
							
						} else {
							this.commonList = []
							this.$vux.toast.text('无对应专业，请重新搜索');
						}
			
					}					
	
				}).catch(() => {
					this.$vux.toast.text('网络错误，请稍后再试！');
				})
			},

		
			goback() {

				this.$router.back()
			},
	

		
	
			addOrRemove(item) {
				if (JSON.stringify(this.checklist).indexOf(JSON.stringify(item)) == -1) {
					if (this.checklist.length > (2 - this.yixuan)) {
						return false;
					}
					this.checklist.push(item);
		
				} else {
					this.checklist = this.checklist.filter((x) => {
						
						return  JSON.stringify(x) !== JSON.stringify(item);
					})

	
				}
			},
			submit() {

				sessionStorage.setItem('sendList',JSON.stringify(this.checklist))
				setTimeout(() => {
			
					this.commonList = []
					// this.commonJs.gosto('addIntention')
					this.$router.go(-2)
				}, 20)
			}
		}

	}
</script>

<style lang="less" scoped>
	.vux-popup-dialog {
		background: #fff;
	}

	.univSearchWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		position: relative;

		.univSearBox {
			width: 7.5rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: auto;

			.header {
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.3rem;
				z-index: 1000;
				position: relative;
				background: #fff;
				.imgIcon {
					width: 0.4rem;
					height: 0.4rem;

				}
				.backimgs{
				display: inline-block;
      			background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
				background-size:3rem 2.4rem; 
				}
			}

		

		

	

	


		

		





		}

		.scrollerDiv {
			padding: 0.3rem;
			box-sizing: border-box;

			.describe {
				font-size: 0.26rem;
				color: #BBB;
				font-weight: bold;
				// margin-top: 0.6rem;
				margin-bottom: 0.2rem;
			}

			.scrollerCheckList /deep/ .weui-cells:before {
				border: none;
				left: 0;
			}

			.scrollerCheckList {
				list-style: none;
				padding-left: 0;

				li {
					display: flex;
					align-items: center;
					width: 100%;
					height: auto;
					// line-height: 0.9rem;
					border-bottom: 1px solid #eee;
					padding-left: 0.3rem;

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
					}

					span {

						margin-left: 0.28rem;


						padding: 0.2rem;
						box-sizing: border-box;

						b {
							font-size: 0.3rem;
							font-weight: 500;
							letter-spacing: 0.03rem;
							// font-weight:bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.42rem;
						}

						p {
							font-size: 0.26rem;

							// font-weight:bold;
							color: rgba(187, 187, 187, 1);
							line-height: 0.36rem;
						}
					}

					span.selectColor {

						// 
						b,
						p {
							color: @mainColor;
							font-weight: bold;
						}
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 1.2rem;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
			color: #ccc;
			padding: 0 0.3rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.hasChoose {
					color: #222;
					font-size: 0.26rem;
					font-weight: bold;
					margin-right: 0.2rem;
				}

				.selectedNum {
					color: @mainColor;
					font-size: 0.4rem;
					margin-right: 0.07rem;
				}

				.totalNum {
					color: #BBB;
					font-size: 0.22rem;
				}
			}

			.right {
				display: inline-block;
				// width: 2rem;
				padding: 0 0.3rem;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				border-radius: 0.1rem;
				background: @mainColor;
				color: #fff;
				font-size: 0.30rem;
			}
		}

	}
</style>
